<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>话题详情</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <link rel="stylesheet" href="__STATIC__/lib/layui/css/layui.css">
   <link rel="stylesheet" href="__ADMIN_STATIC__/css/oksub.css">
   <script type="text/javascript" src="__STATIC__/lib/loading/okLoading.js"></script>
   <style>
      .ok-body {
         padding: 20px;
      }
   </style>
</head>
<body>
<div class="ok-body">
   <blockquote class="layui-elem-quote">
      <p>{$model.name}</p>
   </blockquote>

   <blockquote class="layui-elem-quote layui-quote-nm">
      <form class="layui-form">
      <table class="layui-table">
         <colgroup>
            <col width="200">
            <col>
         </colgroup>
         <thead>
         <tr>
            <th>参数</th>
            <th>参数值</th>
         </tr>
         </thead>
         <tbody>
         <tr>
            <td>话题名称</td>
            <td>{$model.name}</td>
         </tr>
         <tr>
            <td>话题ID</td>
            <td>{$model.id}</td>
         </tr>
         <tr>
            <td>话题封面</td>
            <td><img width="150" src="{$model.image_url}"></td>
         </tr>
         <tr>
            <td>话题描述</td>
            <td>{$model.desc}</td>
         </tr>
         <tr>
            <td>话题状态</td>
            <td>
               <input lay-filter="formStatus" name="status" type="checkbox" lay-skin="switch" lay-text="连载|完结" {if $model->status == 0}checked="checked"{/if}>
            </td>
         </tr>
         <tr>
            <td>实际文章数目</td>
            <td>{$model.articles_count}</td>
         </tr>
         <tr>
            <td>统计文章数目</td>
            <td>{if $model.status}{$model.count}{else /}未完结.{/if}</td>
         </tr>
         <tr>
            <td>所属分类</td>
            <td>{$model.category.name}</td>
         </tr>
         <tr>
            <td>创建者</td>
            <td>{$model.username}</td>
         </tr>
         <tr>
            <td>创建时间</td>
            <td>{$model.create_time}</td>
         </tr>
         <tr>
            <td>修改时间</td>
            <td>{$model.update_time}</td>
         </tr>
         </tbody>
      </table>
      </form>
   </blockquote>

   <!--模糊搜索区域-->
   <form class="layui-form ok-search-form">
      <div class="layui-form-item">
         <div class="layui-inline">
            <div class="layui-input-inline">
               <input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime" name="start_time">
            </div>
         </div>
         <div class="layui-inline">
            <div class="layui-input-inline">
               <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="end_time">
            </div>
         </div>
         <div class="layui-inline">
            <div class="layui-input-inline">
               <input class="layui-input" placeholder="话题名称" autocomplete="off" name="name">
            </div>
         </div>
         <div class="layui-inline">
            <div class="layui-input-inline">
               <select name="category_id">
                  <option value="">请选择所属分类</option>
                  {foreach $category as $k=>$v }
                  <option value="{$k}">{$v}</option>
                  {/foreach}
               </select>
            </div>
         </div>
         <div class="layui-inline">
            <div class="layui-input-inline">
               <select name="status">
                  <option value="">请选择状态</option>
                  {foreach $status as $k=>$v }
                  <option value="{$k}">{$v}</option>
                  {/foreach}
               </select>
            </div>
         </div>
         <div class="layui-inline">
            <div class="layui-input-inline">
               <button class="layui-btn" lay-submit="" lay-filter="search">
                  <i class="layui-icon">&#xe615;</i>
               </button>
            </div>
         </div>
      </div>
   </form>
   <!--数据表格-->
   <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>

</div>
<script src="__STATIC__/lib/layui/layui.js"></script>

<script type="text/javascript">
   layui.use(["element", "table", "form", "laydate", "okLayer", "okUtils"], function () {
      let table = layui.table;
      let form = layui.form;
      let util = layui.util;
      let laydate = layui.laydate;
      let okLayer = layui.okLayer;
      let okUtils = layui.okUtils;
      okLoading.close();
      util.fixbar({});

      laydate.render({elem: "#startTime", type: "datetime"});
      laydate.render({elem: "#endTime", type: "datetime"});

      let articleTable = table.render({
         elem: "#tableId",
         url: "{:url('article/list',['topic_id' => $model->id])}",
         limit: 20,
         page: true,
         even: true,
         toolbar: "#toolbarTpl",
         cols: [[
            {type: "checkbox", fixed: "left"},
            {field: "id", title: "ID", width: 120, sort: true},
            {field: "title", title: "标题", width: 250, templet:'#urlTpl'},
            {field: "status", title: "状态", width: 110, align: "center", templet: "#statusTpl"},
            {field: "best", title: "是否精品", width: 110, align: "center", templet: "#bestTpl"},
            {field: "likes_count", title: "喜欢量", width: 80},
            {field: "visited", title: "阅读量", width: 80},
            {field: "comments_count", title: "评论量", width: 80},
            {field: "disallow", title: "允许评论", width:100, templet: "#disallow"},
            {field: "username", title: "发布者", width: 100},
            {field: "create_time", title: "创建时间", width: 180},
            {field: "update_time", title: "更新时间", width: 180},
            {title: "操作", width: 120, align: "center", fixed: "right", templet: "#operationTpl"}
         ]],
         done: function (res, curr, count) {
            console.log(res, curr, count)
         }
      });

      form.on("submit(search)", function (data) {
         articleTable.reload({
            where: data.field,
            page: {curr: 1}
         });
         return false;
      });

      table.on("toolbar(tableFilter)", function (obj) {
         switch (obj.event) {
            case "batchDel":
               batchDel();
               break;
            case "add":
               add();
               break;

         }
      });

      table.on("tool(tableFilter)", function (obj) {
         let data = obj.data;
         switch (obj.event) {
            case "edit":
               edit(data.id);
               break;
            case "del":
               del(data.id);
               break;
            case "tra":
               tra(data.id);
               break;
            case "pub":
               pub(data.id);
               break;

         }
      });

      function batchDel() {
         okLayer.confirm("确定要批量放置回收站吗？", function (index) {
            layer.close(index);
            var idsStr = okUtils.tableBatchCheck(table);
            if (idsStr) {
               okUtils.ajax("{:url('article/batchTrash')}", "put", {ids: idsStr, tid: {$model.id}}, true).done(function (response) {
                  console.log(response);
                  okUtils.tableSuccessMsg(response.msg);
               }).fail(function (error) {
                  console.log(error)
               });
            }
         });
      }

      /*添加话题文章*/
      function add() {
         okLayer.open("添加文章", "{:url('article/topicCreate',['topic_id'=>$model->id])}", "90%", "90%", null, function () {
            articleTable.reload();
         })
      }
      /*编辑话题文章*/
      function edit(id) {
         okLayer.open("编辑文章", "{:url('article/topicEdit',['topic_id'=>$model->id])}&id=" + id, "90%", "90%", null, function () {
            articleTable.reload();
         })
      }

      function del(id) {
         okLayer.confirm("确定要删除吗？", function () {
            okUtils.ajax("{:url('article/delete')}", "delete", {id: id}, true).done(function (response) {
               console.log(response);
               okUtils.tableSuccessMsg(response.msg);
            }).fail(function (error) {
               console.log(error)
            });
         })
      }

      //改变评论状态
      form.on('switch(formDis)', function(data){
         var id = data.value;
         var val = data.elem.checked ? 0 : 1;
         okUtils.ajax("{:url('article/disallow')}", "post", {id: id, value: val}, true).done(function (response) {
            if (response.code === 0) return layer.msg(response.msg, {icon: 1, time: 1000});
            return layer.msg(response.msg, {icon: 2, time: 2000});
         }).fail(function (error) {
            console.log(error);
         });
      });

      //回收站
      function tra(id) {
         okLayer.confirm("确定要放置回收站吗？", function () {
            okUtils.ajax("{:url('article/status')}", "post", {id: id, status: 3}, true).done(function (response) {
               console.log(response);
               okUtils.tableSuccessMsg(response.msg);
            }).fail(function (error) {
               console.log(error)
            });
         })
      }

      //重新发布
      function pub(id) {
         okLayer.confirm("确定要重新发布吗？", function () {
            okUtils.ajax("{:url('article/status')}", "post", {id: id,status: 1}, true).done(function (response) {
               console.log(response);
               okUtils.tableSuccessMsg(response.msg);
            }).fail(function (error) {
               console.log(error)
            });
         })
      }

      //改变话题状态
      form.on('switch(formStatus)', function(data){
         var status = data.elem.checked ? 0 : 1;
         okUtils.ajax("{:url('status')}", "post", {id: {$model['id']},status: status}, true).done(function (response) {
            if (response.code === 0) return layer.msg(response.msg, {icon: 1, time: 1000});
            return layer.msg(response.msg, {icon: 2, time: 2000});
         }).fail(function (error) {
            console.log(error);
         });
      });

   })

</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
   <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel">放置回收站</button>
      <button class="layui-btn layui-btn-sm" lay-event="add">添加文章</button>
   </div>
</script>
<!-- 链接模板 -->
<script type="text/html" id="urlTpl">
   <a href="javascript:void(0);" target="_blank">{{d.title}}</a>
</script>
<!-- 允许评论模板-->
<script type="text/html" id="disallow">
   <input lay-event="dis" lay-filter="formDis" type="checkbox" name="dis" value="{{d.id}}" lay-skin="switch" {{ d.disallow==0 ? 'checked' : ''}}>
</script>
<script type="text/html" id="statusTpl">
   {{#  if(d.status == 1){ }}
   <span class="layui-btn layui-btn-normal layui-btn-xs">已发布</span>
   {{#  } else if(d.status == 2) { }}
   <span class="layui-btn layui-btn-warm layui-btn-xs">草稿箱</span>
   {{#  } else if(d.status == 3) { }}
   <span class="layui-btn layui-btn-danger layui-btn-xs">回收站</span>
   {{#  } }}
</script>
<script type="text/html" id="bestTpl">
   {{#  if(d.best == 1){ }}
   <span>-</span>
   {{#  } else if(d.best == 2) { }}
   <span class="layui-badge layui-bg-orange">精品</span>
   {{#  } }}
</script>
<!-- 行工具栏模板 -->
<script type="text/html" id="operationTpl">
   <a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
   {{#  if(d.status != 3){ }}
   <a href="javascript:" title="回收站" lay-event="tra"><i class="layui-icon">&#xe640;</i></a>
   {{#  } else if(d.status == 3) { }}
   <a href="javascript:" title="重新发布" lay-event="pub"><i class="layui-icon">&#xe666;</i></a>
   <a href="javascript:" title="彻底删除" lay-event="del"><i class="layui-icon">&#x1006;</i></a>
   {{#  } }}
</script>
</body>
</html>


